<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 企业工商信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="add"
                >新增企业类别</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="add1"
                >新增组织机构</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="add2"
                >新增行业类别</el-button>


            </div>
            <el-tabs :tab-position="tabPosition" style="height: 100%;">
                <el-tab-pane label="企业类型">
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                type="selection"
                                align="center"
                                prop="tid"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="typeName"
                                label="类型名称"
                        >
                        </el-table-column>
                        <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button
                                        type="text"
                                        icon="el-icon-edit"
                                        @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                        type="text"
                                        icon="el-icon-delete"
                                        class="red"
                                        @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="行业分类">
                    <el-table
                            :data="tableData2"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                type="selection"
                                align="center"
                                prop="iuId"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="industryName"
                                label="类型名称"
                        >
                        </el-table-column>
                        <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button
                                        type="text"
                                        icon="el-icon-edit"
                                        @click="handleEdit2(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                        type="text"
                                        icon="el-icon-delete"
                                        class="red"
                                        @click="handleDelete2(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="组织机构">
                    <el-table
                            :data="tableData1"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                type="selection"
                                align="center"
                                prop="id"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="organization"
                                label="类型名称"
                        >
                        </el-table-column>
                        <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button
                                        type="text"
                                        icon="el-icon-edit"
                                        @click="handleEdit1(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                        type="text"
                                        icon="el-icon-delete"
                                        class="red"
                                        @click="handleDelete1(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="企业类别编辑" :visible.sync="editVisible" width="50%">
        <el-form :model="form"  ref="form" label-width="180px" class="demo-ruleForm">
            <el-form-item label="企业类别">
                <el-input v-model="form.typeName" prop="typeName" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button  @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确定</el-button>
            </span>
    </el-dialog>
        <el-dialog title="行业类别编辑" :visible.sync="editVisible2" width="50%">
            <el-form :model="form2"  ref="form" label-width="180px" class="demo-ruleForm">
                <el-form-item label="行业类别">
                    <el-input v-model="form2.industryName" prop="industryName" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="editVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit2('form')">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="组织机构编辑" :visible.sync="editVisible1" width="50%">
            <el-form :model="form1"  ref="form" label-width="180px" class="demo-ruleForm">
                <el-form-item label="组织机构">
                    <el-input v-model="form1.organization" prop="organization" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="editVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit1('form')">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "TypeTable",
        data() {
            return {
                tabPosition: 'left',
                tableData: [],
                tableData1: [],
                tableData2: [],
                editVisible: false,
                editVisible1: false,
                editVisible2: false,
                form:{
                    tid:'',
                    typeName:''
                },
                form1:{
                    iuId:'',
                    industryName:''
                },
                form2:{
                    id:'',
                    organization:''
            }
            };
        },
        created() {
            this.typeList();
            this.organizationsGetData();
            this.getIndustry();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            typeList() {
                const _this = this
                _this.$axios.get("/companytype/finaAll").then(res =>  {
                    _this.tableData = res.data.data
            })
            },
            organizationsGetData() {
                const _this = this
                _this.$axios.get("/organizations/finaAll").then(res =>  {
                    _this.tableData1 = res.data.data
            })
            },
            getIndustry(){
                const _this = this
                _this.$axios.get("/industry/finaAll").then(res =>  {
                    _this.tableData2 = res.data.data
            })
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.$axios.get("/companytype/del/"+row.tid).then(res =>{
                    if(res.status = 200){
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                    this.typeList();

                }

            });
            }).catch(() => {});
            },
            handleDelete1(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.$axios.get("/organizations/del/"+row.id).then(res =>{
                    if(res.status = 200){
                    this.$message.success('删除成功');
                    this.tableData1.splice(index, 1);
                    this.organizationsGetData();
                }

            });
            }).catch(() => {});
            },
            handleDelete2(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(()=>{
                    this.$axios.get("/industry/del/"+row.iuId).then(res =>{
                    if(res.status = 200){
                    this.$message.success('删除成功');
                    this.getIndustry();
                }

            });
            }).catch(() => {});
            },
            // 编辑操作
            handleEdit(index, row) {
                this.idx = index;
                this.$axios.get('/companytype/' + row.tid).then((res) => {
                    this.form=res.data.data;
            })
                this.editVisible = true;
            },
            // 编辑操作
            handleEdit1(index, row) {
                this.idx = index;
                this.$axios.get('/organizations/' + row.id).then((res) => {
                    this.form=res.data.data;
            })
                this.editVisible1 = true;
            },
            // 编辑操作
            handleEdit2(index, row) {
                this.idx = index;
                this.$axios.get('/industry/' + row.iuId).then((res) => {
                    this.form=res.data.data;
            })
                this.editVisible2 = true;
            },
            // 保存编辑
            saveEdit(formName) {
                const  _this =this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$axios.post("/companytype/saveEdit",_this.form).then(res => {
                            _this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        _this.$set(this.tableData, this.idx, this.formPartner);
                        _this.editVisible = false;
                        this.typeList();

                    });
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            saveEdit1(formName) {
                const  _this =this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$axios.post("/organizations/saveEdit",_this.form1).then(res => {
                            _this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        _this.$set(this.tableData1, this.idx, this.form1);
                        _this.editVisible1 = false;
                        this.organizationsGetData();

                    });
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            saveEdit2(formName) {
                const  _this =this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$axios.post("/industry/saveEdit",_this.form2).then(res => {
                            _this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        _this.$set(this.tableData2, this.idx, this.form2);
                        _this.editVisible2 = false;
                        this.getIndustry();
                    });
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            add(){
                this.editVisible = true;
            },
            add2(){
                this.editVisible2 = true;
            },
            add1(){
                this.editVisible1 = true;
            }
        }

    }
</script>

<style>
    .el-tabs__item:hover {
        color: #409EFF!important;
        cursor: pointer;
    }
    .el-tabs__item.is-active {
        color: #409EFF!important;
    }
    .el-tabs__active-bar {

        background-color: #409EFF !important;
    }
</style>
<style scoped>

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-input_min{
        width: 150px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .el-input__inner {
        width: 80%;
    }
</style>